<!DOCTYPE html>
<!--    载入静态文件 引入static标签-->
{% load static %}
<!-- 网站主语言 -->
<html lang="zh-cn" >
<head>
    <!-- 网站采用的字符编码 -->
    <meta http - equiv = "Content-Type" content = "text/html; charset=utf-8">
    <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

</head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
<script>
   $(document).ready(function(){
   var a_idx = 0;
   $("body").click(function(e){
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 1024,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
   });
   if($(window).height() == $(document).height()){
        $("#footer").addClass("fixed-bottom");
   }else{
         $("#footer").removeClass("fixed-bottom");
   }
   $(window).resize(function(){
        if($(window).height() == $(document).height()){
        $("#footer").addClass("fixed-bottom");
   }else{
         $("#footer").removeClass("fixed-bottom");
   }
   });
<!--   alert($(window).height());-->
<!--   alert($(document).height());-->
});
</script>
<body>
<!-- 引入导航栏 -->
{% include 'note/header.html' %}
<!-- 预留具体页面的位置 -->
<div style="margin-top:80px"/>
{% block content %}{% endblock content %}
<!-- 引入注脚 -->
{% include 'note/footer.html' %}
<!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->

<!--
    popper.js 采用 cdn 远程引入，意思是你不需要把它下载到本地。
    在实际的开发中推荐静态文件尽量都使用 cdn 的形式。
    教程采用本地引入是为了让读者了解静态文件本地部署的流程。
-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>

<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>

</html>